<template>
    <div id="app">
        <div class="qrcode-reader" v-show="scanLoading">
            <Icon type="ios-close-circle" class="qrcode-btn-close" @click="stop" />
            <div id="qrcodeReader"></div>
        </div>
<!--      <loginPage></loginPage>-->
<!--      <mainFrame v-else></mainFrame>-->
        <router-view :key="$route.path"/>
    </div>
</template>

<script>
import loginPage from 'public/layout/login/loginPage.vue'
import { mapMutations } from 'vuex';

var mobileMaxWidth = 600;
var maxWidth = 1440;
var designWidth = 1280;
var rem2px = 100;

export default {
    name: 'app',
    components:{loginPage},
    data() {
        return {
            scanLoading: false
        }
    },
    methods: {
        ...mapMutations('admin/layout', [
            'setDevice',
        ]),
        handleWindowResize() {
            let isMobile = false
            let win = window

            win.document.documentElement.style.fontSize = (
                (Math.min(win.innerWidth, maxWidth) / designWidth) * rem2px
            ) + 'px';
            if (win.innerWidth <= mobileMaxWidth) {
                isMobile = true;
            }
            win.isMobile = isMobile
            document.body.className = 'configBody ' + (isMobile ? 'mobile' : 'pc')
            this.setDevice(isMobile);
        },
        stop() {
            this.$EventBus.$emit('scanQrcode-stop');
            this.scanLoading = false;
        },
    },
    created() {
        this.$EventBus.$on('scanQrcode-loadingChange', (loading)=> {
            this.scanLoading = loading
        })
    },
    beforeDestroy () {
        window.removeEventListener('resize', this.handleWindowResize)
        this.$EventBus.$off('scanQrcode-loadingChange')
    },
    mounted () {
        window.addEventListener('resize', this.handleWindowResize)
        this.handleWindowResize()
        // console.log("file: App.vue:65  mounted", this.$route)
    },
}
</script>
<style scoped>

</style>